import 'package:flustars/flustars.dart';
import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:get/get.dart';
import 'package:zrjz/comm/base/base.dart';
import 'package:zrjz/comm/constants/constants.dart';
import 'package:zrjz/comm/utils/ex_widget.dart';
import 'package:zrjz/comm/utils/ext_dart.dart';
import 'package:zrjz/comm/widget/common_widget.dart';
import 'package:zrjz/comm/widget/my_button.dart';
import 'package:zrjz/comm/widget/my_load_image.dart';
import 'package:zrjz/comm/widget/my_text_field.dart';
import 'package:zrjz/comm/widget/my_text_view.dart';
import 'package:zrjz/comm/widget/no_shadow_scroll_behavior.dart';
import 'package:zrjz/generated/assets.dart';
import 'package:zrjz/modules/auth/sign_up/sign_up_state.dart';
import 'package:zrjz/router/page_router.dart';

import 'sign_up_controller.dart';

class SignUpPage extends BaseStatefulPage<SignUpController> {
  SignUpPage({super.key});

  //启动当前页面
  static void startInstance() {
    return Get.start(RouterPath.AUTH_SIGNUP);
  }

  @override
  State<SignUpPage> createState() => _SignUpPageState();

  @override
  SignUpController createRawController() {
    return SignUpController();
  }
}

class _SignUpPageState extends BaseState<SignUpPage,SignUpController> {

  late SignUpState state;

  @override
  void initState() {
    super.initState();
    state = controller.state;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CommonWidget.appBar(context, '注册'.tr),
        body: SafeArea(
          bottom: true,
          top: false,
          child: ScrollConfiguration(
            behavior: NoShadowScrollBehavior(),
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: autoCtlGetBuilder(builder: (controller) {
                return Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    //电话号码
                    _buildInputLayout(
                      "phone",
                      Assets.authLoginPhoneIcon,
                      leftIconWidth: 13.5,
                      leftIconHeight: 16,
                      marginTop: 15,
                      textInputType: TextInputType.phone,
                      textInputAction: TextInputAction.next,
                      errorText: controller.mobilePhoneErrorText,
                      onSubmit: (formKey, value) {
                        state.formData[formKey]!['focusNode'].unfocus();
                        FocusScope.of(context).requestFocus(state.formData['code']!['focusNode']);
                      },
                    ),

                    //验证码
                    _buildInputLayout(
                      "code",
                      Assets.authLoginVerifyIcon,
                      leftIconWidth: 13,
                      leftIconHeight: 15,
                      marginTop: 15,
                      paddingRight: 13,
                      textInputAction: TextInputAction.next,
                      errorText: controller.codeErrorText,
                      showRightIcon: true,
                      rightWidget: MyTextView(
                        controller.isCounting ? controller.countdownTime.toString() + " s" : '获取验证码'.tr,
                        textAlign: TextAlign.center,
                        textColor: controller.isCounting ? ColorConstants.gray99 : ColorConstants.appBlue,
                        fontSize: 14,
                        paddingRight: 5,
                        isFontMedium: true,
                        onClick: controller.isCounting ? null : () => controller.showVerifyCodedDialog(),
                      ).paddingOnly(top: 15, bottom: 15),
                      onSubmit: (formKey, value) {
                        state.formData[formKey]!['focusNode'].unfocus();
                        FocusScope.of(context).requestFocus(state.formData['password']!['focusNode']);
                      },
                    ),

                    //密码
                    _buildInputLayout(
                      "password",
                      Assets.authLoginPasswordIcon,
                      leftIconWidth: 13.5,
                      leftIconHeight: 17,
                      marginTop: 15,
                      textInputAction: TextInputAction.next,
                      obscureText: !controller.pwdVisibility,
                      errorText: controller.passwordErrorText,
                      showRightIcon: true,
                      rightWidget: IconButton(
                        highlightColor: Colors.transparent,
                        splashColor: Colors.transparent,
                        icon: controller.pwdVisibility
                            ? const MyAssetImage(Assets.authLoginPasswordVisIcon, width: 20.5, height: 13)
                            : const MyAssetImage(Assets.authLoginPasswordInvisIcon, width: 20.5, height: 13),
                        onPressed: () {
                          controller.switchPwdVisibility();
                        },
                      ),
                      onSubmit: (formKey, value) {
                        state.formData[formKey]!['focusNode'].unfocus();
                        // FocusScope.of(context).requestFocus(state.formData['invite_code']!['focusNode']);
                        controller.doRegister();
                      },
                    ),

                    //邀请码
                    // _buildInputLayout(
                    //   "invite_code",
                    //   Assets.authSignupInviteIcon,
                    //   leftIconWidth: 15,
                    //   leftIconHeight: 15,
                    //   marginTop: 15,
                    //   marginBottom: 20,
                    //   onSubmit: (formKey, value) {
                    //     state.formData[formKey]!['focusNode'].unfocus();
                    //     controller.doRegister();
                    //   },
                    // ),

                    // 底部白色的背景布局展示
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        MyTextView(
                          '已经注册账号？',
                          textColor: DarkThemeUtil.multiColors(ColorConstants.gray76, darkColor: ColorConstants.white),
                          fontSize: 14,
                          isFontMedium: true,
                        ),
                        MyTextView(
                          '点击登录',
                          textColor: ColorConstants.appBlue,
                          fontSize: 14,
                          isFontMedium: true,
                          onClick: () {
                            controller.gotoLoginPage();
                          },
                        ),
                      ],
                    ).marginAll(19.5),

                    //注册按钮
                    MyButton(
                      text: "注册".tr,
                      textColor: ColorConstants.whitefe,
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                      backgroundColor: ColorConstants.appBlue,
                      minHeight: 50,
                      radius: 5,
                      onPressed: () => controller.doRegister(),
                    ).marginOnly(left: 20, right: 20),

                    //协议
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        MyAssetImage(
                          controller.isChecked ? Assets.authCheckboxChoose : Assets.authCheckboxUnchoose,
                          width: 14.0,
                          height: 13.0,
                        ).padding(all: 5).onTap(() {
                          controller.handlerSelectAgreeCheckbox();
                        }),
                        const SizedBox(
                          width: 6,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            MyTextView(
                              '已阅读并同意Room的'.tr,
                              textColor: DarkThemeUtil.multiColors(ColorConstants.gray76, darkColor: ColorConstants.white),
                              fontSize: 14,
                              isFontMedium: true,
                            ),
                            Row(
                              children: [
                                MyTextView(
                                  '免责条款'.tr,
                                  textColor: ColorConstants.appBlue,
                                  fontSize: 14,
                                  isFontMedium: true,
                                  onClick: () {
                                    controller.gotoUserAgreementPage();
                                  },
                                ),
                                MyTextView(
                                  ' 和 '.tr,
                                  textColor: DarkThemeUtil.multiColors(ColorConstants.gray76, darkColor: ColorConstants.white),
                                  fontSize: 14,
                                  isFontMedium: true,
                                ),
                                MyTextView(
                                  '隐私条款'.tr,
                                  textColor: ColorConstants.appBlue,
                                  fontSize: 14,
                                  isFontMedium: true,
                                  onClick: () {
                                    controller.gotoPricacyPolicyPage();
                                  },
                                ),
                              ],
                            )
                          ],
                        ),
                      ],
                    ).marginSymmetric(vertical: 22),
                  ],
                );
              }),
            ),
          ),
        ));
  }

  /// 手机号码与验证码的输入框
  _buildInputLayout(
    String key,
    String leftIconRes, {
    double leftIconWidth = 0,
    double leftIconHeight = 0,
    double marginTop = 23,
    double marginBottom = 0,
    double paddingRight = 10,
    bool? showRightIcon = false, //是否展示右侧的布局
    Widget? rightWidget, //右侧的布局
    TextInputType textInputType = TextInputType.text,
    String? errorText,
    bool obscureText = false,
    TextInputAction textInputAction = TextInputAction.done,
    Function? onSubmit,
  }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        state.formData[key]!['value'],
        hintText: state.formData[key]!['hintText'],
        hintStyle: TextStyle(
          color: DarkThemeUtil.multiColors(ColorConstants.gray82, darkColor: ColorConstants.white),
          fontSize: 14.0,
          fontWeight: FontWeight.w500,
        ),
        controller: state.formData[key]!['controller'],
        focusNode: state.formData[key]!['focusNode'],
        margin: EdgeInsets.only(left: 20, right: 20, top: marginTop, bottom: marginBottom),
        showDivider: false,
        fillBackgroundColor: DarkThemeUtil.multiColors(ColorConstants.white, darkColor: ColorConstants.darkBlackItem),
        fillCornerRadius: 5,
        padding: EdgeInsets.only(left: 16, right: paddingRight, top: 2.5, bottom: 2.5),
        height: 50,
        style: TextStyle(
          color: DarkThemeUtil.multiColors(ColorConstants.tabTextBlack, darkColor: ColorConstants.white),
          fontSize: 14.0,
          fontWeight: FontWeight.w500,
        ),
        inputType: textInputType,
        textInputAction: textInputAction,
        onSubmit: onSubmit,
        cursorColor: ColorConstants.tabTextBlack,
        obscureText: obscureText,
        errorText: errorText,
        showLeftIcon: true,
        showRightIcon: showRightIcon,
        rightWidget: rightWidget,
        leftWidget: Row(
          children: [
            MyAssetImage(leftIconRes, width: leftIconWidth, height: leftIconHeight),
            const Spacer(),
            Container(
              color: ColorConstants.graye5,
              width: 1,
              height: 15,
            )
          ],
        ).constrained(width: 30),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<SignUpController>();
    super.dispose();
  }
}
